<template>
  <div class="navRight">
    <div class="nav" v-for="key of alpha" :key="key" @click="$emit('alphalett',key)" @touchmove="navmove" :ref="key">
      <span>{{key}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CityNav',
  props: {
    list: Object
  },
  methods: {
    navmove (e) {
      let mouseY = e.touches[0].pageY
      let AToTop = this.$refs['A'][0].offsetTop
      let alphaToHeader = (mouseY - 88) - AToTop
      let index = Math.floor(alphaToHeader / 20)
      let curLeter = this.alpha[index]
      if (curLeter) {
        this.$emit('alphalett', curLeter)
      }
    }
  },
  computed: {
    alpha () {
      let arr = []
      for (let key in this.list) {
        arr.push(key)
      }
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .navRight
    display flex
    position fixed
    justify-content center
    flex-direction column
    color #00BCD4
    top 1.58rem
    right 0rem
    bottom 0
  .nav
    height 0.4rem
    width 0.32rem
    text-align center
</style>
